// public/js/components/help-modal.js
// 可共享的帮助弹窗组件

class HelpModal {
    constructor(options = {}) {
        this.modal = null;
        this.isInitialized = false;
        this.images = options.images || []; // 图片路径数组
        this.currentImageIndex = 0; // 当前显示的图片索引
    }

    // 初始化帮助弹窗
    init() {
        if (this.isInitialized) return;
        
        // 创建弹窗HTML结构
        this.modal = document.createElement('div');
        this.modal.id = 'help-modal';
        this.modal.className = 'help-modal';
        
        // 根据是否有图片决定显示内容
        if (this.images.length > 0) {
            this.modal.innerHTML = this.createImageCarouselHTML();
        } else {
            this.modal.innerHTML = this.createTextHTML();
        }

        // 添加到body
        document.body.appendChild(this.modal);

        // 绑定点击背景关闭事件
        this.modal.addEventListener('click', (e) => {
            if (e.target === this.modal) {
                this.close();
            }
        });

        // 如果有图片，绑定导航按钮事件
        if (this.images.length > 0) {
            this.bindCarouselEvents();
        }

        // 设为全局函数
        window.helpModal = this;
        window.closeHelpModal = () => this.close();

        this.isInitialized = true;
    }

    // 创建文本内容的HTML
    createTextHTML() {
        return `
            <div class="help-modal-content">
                <h2 class="help-modal-title">游戏说明书</h2>
                <div class="help-modal-text">
                    <p>欢迎来到桌游吧！这里是一个多人在线桌游平台，你可以与朋友们一起享受各种有趣的桌游。</p>
                    <p>更多详细内容正在完善中...</p>
                </div>
                <button class="help-modal-close" onclick="window.helpModal.close()">关闭</button>
            </div>
        `;
    }

    // 创建图片轮播的HTML
    createImageCarouselHTML() {
        return `
            <div class="help-modal-content help-modal-carousel">
                <h2 class="help-modal-title">🎮 游戏帮助</h2>
                <div class="help-image-container">
                    <button class="help-nav-btn help-nav-prev" id="help-prev-btn" ${this.images.length <= 1 ? 'style="display:none;"' : ''}>
                        ‹
                    </button>
                    <div class="help-image-wrapper">
                        <img id="help-carousel-image" src="${this.images[0]}" alt="帮助说明" class="help-carousel-image">
                    </div>
                    <button class="help-nav-btn help-nav-next" id="help-next-btn" ${this.images.length <= 1 ? 'style="display:none;"' : ''}>
                        ›
                    </button>
                </div>
                <div class="help-image-indicator" id="help-image-indicator">
                    ${this.images.length > 1 ? `${this.currentImageIndex + 1} / ${this.images.length}` : ''}
                </div>
                <div class="help-image-dots" id="help-image-dots">
                    ${this.images.map((_, index) => 
                        `<span class="help-dot ${index === 0 ? 'active' : ''}" data-index="${index}"></span>`
                    ).join('')}
                </div>
                <button class="help-modal-close" onclick="window.helpModal.close()">关闭</button>
            </div>
        `;
    }

    // 绑定轮播事件
    bindCarouselEvents() {
        const prevBtn = document.getElementById('help-prev-btn');
        const nextBtn = document.getElementById('help-next-btn');
        const imageEl = document.getElementById('help-carousel-image');
        const indicatorEl = document.getElementById('help-image-indicator');
        const dots = document.querySelectorAll('.help-dot');

        if (prevBtn) {
            prevBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                this.showPreviousImage();
            });
        }

        if (nextBtn) {
            nextBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                this.showNextImage();
            });
        }

        // 绑定圆点导航
        dots.forEach((dot, index) => {
            dot.addEventListener('click', (e) => {
                e.stopPropagation();
                this.goToImage(index);
            });
        });
    }

    // 显示上一张图片
    showPreviousImage() {
        if (this.images.length <= 1) return;
        this.currentImageIndex = (this.currentImageIndex - 1 + this.images.length) % this.images.length;
        this.updateImageDisplay();
    }

    // 显示下一张图片
    showNextImage() {
        if (this.images.length <= 1) return;
        this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length;
        this.updateImageDisplay();
    }

    // 跳转到指定图片
    goToImage(index) {
        if (index >= 0 && index < this.images.length) {
            this.currentImageIndex = index;
            this.updateImageDisplay();
        }
    }

    // 更新图片显示
    updateImageDisplay() {
        const imageEl = document.getElementById('help-carousel-image');
        const indicatorEl = document.getElementById('help-image-indicator');
        const dots = document.querySelectorAll('.help-dot');

        if (imageEl && this.images[this.currentImageIndex]) {
            imageEl.src = this.images[this.currentImageIndex];
        }

        if (indicatorEl) {
            indicatorEl.textContent = `${this.currentImageIndex + 1} / ${this.images.length}`;
        }

        // 更新圆点状态
        dots.forEach((dot, index) => {
            if (index === this.currentImageIndex) {
                dot.classList.add('active');
            } else {
                dot.classList.remove('active');
            }
        });
    }

    // 显示帮助弹窗
    show() {
        if (!this.isInitialized) {
            this.init();
        }
        // 重置到第一张图片
        if (this.images.length > 0) {
            this.currentImageIndex = 0;
            this.updateImageDisplay();
        }
        this.modal.classList.add('show');
    }

    // 关闭帮助弹窗
    close() {
        if (this.modal) {
            this.modal.classList.remove('show');
        }
    }

    // 销毁帮助弹窗
    destroy() {
        if (this.modal && this.modal.parentNode) {
            this.modal.parentNode.removeChild(this.modal);
        }
        this.modal = null;
        this.isInitialized = false;
        
        // 清理全局引用
        if (window.helpModal === this) {
            delete window.helpModal;
        }
        if (window.closeHelpModal) {
            delete window.closeHelpModal;
        }
    }
}

// 导出供模块使用
export default HelpModal;
